<template>
	<div id="CustomerLost">
		<!-- <h2>{{ msg }}</h2>  -->

		<div class="line"></div>

		<el-form :inline="true" :model="formInline" class="demo-form-inline" width="100%">
			<el-form-item label="客户名称">
				<el-input v-model="formInline.name" placeholder="客户名称"></el-input>
			</el-form-item>
			<el-form-item label="客户经理">
				<el-input v-model="formInline.username" placeholder="客户经理"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="formInline.region">
					<el-option label="" value=""></el-option>
					<el-option label="暂缓流失" value="暂缓流失"></el-option>
					<el-option label="确认流失" value="确认流失"></el-option>
					<el-option label="查询全部" value="查询全部"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="onSearch()" type="primary"><i class="el-icon-search"></i></el-button>
				<el-button @click="drawer=true" style="margin-left: 16px;">
					<i class="el-icon-more-outline"></i>
				</el-button>
			</el-form-item>
		</el-form>
		<template>
			<div class="drawer">
				<el-drawer :visible.sync="drawer" :with-header="false">
					<h1>帮助通识</h1>
					<p>客户流失管理介绍帮助</p>
					<ul>
						<li>功能一：可以对数据进行搜索，并且可以对状态进行分类</li>
						<li style="list-style: none;"><img src="../assets/search.png" style="width:100%" /></li>
						<li>功能二：对客户的状态进行状态修改</li>
						<li style="list-style: none;"><img src="../assets/update.png" style="width:100%" /></li>
						<li>功能三：可以快速进行对客户时间的检索</li>
						<li style="list-style: none;"><img src="../assets/update.png" style="width:100%" /></li>
					</ul>
				</el-drawer>
			</div>
		</template>
		<div class="line"></div>
		<template>
			<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
				<el-table-column label="编号" prop="id">
				</el-table-column>
				<el-table-column label="客户名称" prop="name">
				</el-table-column>
				<el-table-column label="客户经理" prop="username">
				</el-table-column>
				<el-table-column label="上次下单时间" prop="lastOrder">
				</el-table-column>
				<el-table-column label="确定流失时间" prop="lostDay">
				</el-table-column>
				<el-table-column label="状态" prop="state">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click.prevent="query(scope.$index, scope.row)">
							<i class="el-icon-view"></i></el-button>
						<template>
							<el-dialog title="暂缓流失" :visible.sync="dialogTablePostpone">
								<div class="dialog">
									<el-form :inline="true" :model="formData">
										<el-form-item label="　　编号">
											<el-input v-model="formData.id" readonly></el-input>
										</el-form-item>
										<el-form-item label="　　　　客户">
											<el-input v-model="formData.name" readonly></el-input>
										</el-form-item>
									</el-form>
									<el-form :inline="true" :model="formData">
										<el-form-item label="客户经理">
											<el-input v-model="formData.username" readonly></el-input>
										</el-form-item>
										<el-form-item label="上次下单时间">
											<el-input v-model="formData.lastOrder" readonly></el-input>
										</el-form-item>
									</el-form>
									<el-form :inline="true" :model="formData">
										<el-form-item label="暂缓措施">
											<el-input class="fun" v-model="formData.content"></el-input>
										</el-form-item>
									</el-form>
									<el-form :inline="true" :model="formData">
										<el-form-item label="追加措施">
											<el-input class="textarea" 　type="textarea" v-model="formData.addMeasures">
											</el-input>
										</el-form-item>
									</el-form>
								</div>
								<div slot="footer" class="dialog-footer">
									<el-button @click="postpone()">暂缓流失</el-button>
									<el-button type="primary" @click="sure()">确定流失</el-button>
								</div>
							</el-dialog>
						</template>
						<template>
							<el-dialog title="确认流失" :visible.sync="dialogTableSure">
								<div class="dialog">
									<el-form :inline="true" :model="formData">
										<el-form-item label="　　编号">
											<el-input v-model="formData.id" readonly></el-input>
										</el-form-item>
										<el-form-item label="　　　　客户">
											<el-input v-model="formData.name" readonly></el-input>
										</el-form-item>
									</el-form>
									<el-form :inline="true" :model="formData">
										<el-form-item label="客户经理">
											<el-input v-model="formData.username" readonly></el-input>
										</el-form-item>
										<el-form-item label="上次下单时间">
											<el-input v-model="formData.lastOrder" readonly></el-input>
										</el-form-item>
									</el-form>
									<el-form :inline="true" :model="formData">
										<el-form-item label="暂缓措施">
											<el-input class="fun" v-model="formData.content" readonly></el-input>
										</el-form-item>
									</el-form>
									<el-form :inline="true" :model="formData">
										<el-form-item label="流失原因">
											<el-input class="textarea" 　type="textarea" v-model="formData.lostCause">
											</el-input>
										</el-form-item>
									</el-form>
								</div>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dialogTableSure = false">返回</el-button>
									<el-button type="primary" @click="sure()">确定</el-button>
								</div>
							</el-dialog>
						</template>
						<el-button size="mini" type="primary" @click.prevent="search(scope.$index,scope.row)">
							<i class="el-icon-pie-chart"></i></el-button>
						<template>
							<el-dialog title="查询时间" :visible.sync="dialogFormVisible">
								<el-form :model="form">
									<el-form-item label="客户名称">
										<el-input v-model="form.name" readonly></el-input>
									</el-form-item>
									<el-form-item label="上次下单时间">
										<el-input v-model="form.lastOrder" readonly></el-input>
									</el-form-item>
									<el-form-item label="确认流失时间">
										<el-input v-model="form.lostDay" readonly></el-input>
									</el-form-item>
								</el-form>
							</el-dialog>
						</template>
					</template>
				</el-table-column>
			</el-table>
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[3, 6, 9, 12]" :page-size="pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
				</el-pagination>
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		name: 'CustomerLost',
		props: ['msg'],
		data() {
			return {
				juese: '',
				drawer: false,
				currentPage: 1, //初始页
				pagesize: 3, //每页的数据
				tableData: [],
				formInline: {
					name: '',
					username: '',
					region: ''
				},
				dialogFormVisible: false,
				dialogTablePostpone: false,
				dialogTableSure: false,
				form: {
					name: '',
					lastOrder: '',
					lostDay: ''
				},
				formData: {
					id: '',
					name: '',
					username: '',
					lastOrder: '',
					lostDay: '',
					content: '',
					addMeasures: '',
					lostCause: ''
				},
				readonly: true
			}
		},
		methods: {
			search(index, row) {
				this.dialogFormVisible = true;
				this.form = row;
			},
			query(index, row) {
				if (row.state == '暂缓流失') {
					this.dialogTablePostpone = true;
				} else {
					this.dialogTableSure = true;
				}
				this.formData = row;
			},
			onSearch() {
				this.$http.post('/customerlost/searchSome?name=' +
					this.formInline.name + '&username=' +
					this.formInline.username + '&state=' + this.formInline.region
				).then(res => {
					this.tableData = res.data.data;
				})
			},
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			queryAll() {
				this.init();
			},
			querySure() {
				this.$http.post('/customerlost/querySure').then(res => {
					this.tableData = res.data.data;
					console.log(res.data.data);
				})
			},
			postpone() {
				this.$http.post('/customerlost/updateThing', {
					id: this.formData.id,
					content: this.formData.content,
					lostDay: this.formData.lostDay,
					addMeasures: this.formData.addMeasures,
					state: '暂缓流失'
				}).then(res => {
					this.inits();
					this.dialogTablePostpone = false;
					this.dialogTableSure = false;
					_this.$notify({
						title: '暂缓流失',
						message: '😀',
						type: 'success'
					});
				})
			},
			sure() {
				let nowTime = this.getNowFormatDate();
				this.$http.post('/customerlost/updateThing', {
					id: this.formData.id,
					content: this.formData.content,
					lostCause: this.formData.lostCause,
					state: '确认流失',
					lostDay: nowTime,
				}).then(res => {
					this.inits();
					this.dialogTableSure = false;
					this.dialogTablePostpone = false;
					_this.$notify({
						title: '确认流失',
						message: '😀',
						type: 'success'
					});
				})
			},
			init() {
				this.$http.post('/customerlost/queryAlls').then(res => {
					this.tableData = res.data.data;
				})
			},
			inits() {
				this.$http.post('/customerlost/queryAll').then(res => {
					this.tableData = res.data.data;
				})
			}, getNowFormatDate() {//获取当前时间
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
				return currentdate;
			}
		},
		created() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname;
			this.init();
		},

	}
</script>

<style scoped>
	#CustomerLost {
		width: 93%;
		padding: 0 43px;
	}

	.line {
		height: 30px;
	}

	table {
		padding: 20px;
		align-items: center;
		width: 1000px;
		box-shadow: 2px 2px 2px 2px whitesmoke;
		border-collapse: collapse;
		border: 1px solid #0F0;
	}

	tr {
		border: 1px solid darkgray;
	}

	td {
		border: 0px;
	}

	.block {
		float: right;
	}

	.fun {
		width: 253%;
	}

	.textarea {
		width: 270%;
	}

	.dialog {
		padding-left: 25px;
	}

	.dialog-footer {
		margin-right: 40px;
	}

	.drawer {
		background: #b3c0d1;
		color: black;
	}
</style>